<template>
<div>
  <div class="hearder">
    <div class="search">
      <input type="text"  placeholder="请输入用户名" v-model="memberName">
      <div style="width: 10px;height: 50px;"></div>
      <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    </div>
    <div class="add"  @click="page" id="getAll">
      <div><i class="el-icon-shopping-cart-2"></i></div>
      <div style="width: 5px;height: 50px;" ></div>
      所有
    </div>
  </div>
 <div class="table">
   <el-table
       :data="dataList"
       style="width: 100%;">
     <el-table-column
         prop="userId"
         header-align="center"
         align="center"
         label="用户id">
     </el-table-column>
     <el-table-column
         prop="openId"
         header-align="center"
         align="center"
         :show-overflow-tooltip='true'
         label="微信登录标识">
     </el-table-column>
     <el-table-column
         prop="loginName"
         header-align="center"
         align="center"
         :show-overflow-tooltip='true'
         label="登录名">
     </el-table-column>
     <el-table-column
         prop="name"
         header-align="center"
         align="center"
         :show-overflow-tooltip='true'
         label="用户名">
     </el-table-column>
     <el-table-column
         prop="status"
         header-align="center"
         align="center"
         label="状态">
       　<template slot-scope="scope">
           <el-tag type="success" style="line-height: 25px" v-if="scope.row.status == 0">在用</el-tag>
           <el-tag type="warning" style="line-height: 25px" v-if="scope.row.status == 1">违规</el-tag>
       　</template>
     </el-table-column>
     <el-table-column
         prop="password"
         header-align="center"
         align="center"
         :show-overflow-tooltip='true'
         label="密码">
     </el-table-column>
     <el-table-column
         prop="mobail"
         header-align="center"
         align="center"
         label="电话">
     </el-table-column>
     <el-table-column
         prop="email"
         header-align="center"
         align="center"
         :show-overflow-tooltip='true'
         label="邮箱">
     </el-table-column>
     <el-table-column
         prop="sex"
         header-align="center"
         align="center"
         label="性别">
     </el-table-column>
     <el-table-column
         prop="age"
         header-align="center"
         align="center"
         label="年龄">
     </el-table-column>
     <el-table-column
         prop="image"
         header-align="center"
         align="center"
         label="头像">
       <template slot-scope="scope" >
         　<img :src="scope.row.image" width="40" height="40" v-if="scope.row.image!=null"/>
       </template>
     </el-table-column>
     <el-table-column
         prop="payPassword"
         header-align="center"
         align="center"
         label="支付密码">
     </el-table-column>
     <el-table-column
         prop="balance"
         header-align="center"
         align="center"
         label="账户余额">
     </el-table-column>
     <el-table-column
         fixed="right"
         header-align="center"
         align="center"
         width="100"
         label="操作">
       <template slot-scope="scope">
         <el-button type="danger" size="small" @click="openInvalid(scope.row)" v-if="scope.row.status == 0">违规失效</el-button>
         <el-button type="success" size="small" v-if="scope.row.status == 1">恢复账户</el-button>
       </template>
     </el-table-column>
   </el-table>
 </div>
  <div class="page" v-if="dataList.length>1">
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[7,15,20,30,50,200]"
          :page-size='pageSize'
          layout="total, sizes, prev, pager, next, jumper"
          :total='total'>
      </el-pagination>
    </div>
  </div>
  <div class="dialog">
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :show-close="show"
        :close-on-click-modal="show"
        >
     <p>你确定要失效id{{form.userId}}，用户{{form.userName}}</p>
      <p style="height: 5px"></p>
      <p style="font-size: 12px;color: #EB984E">{{invalidRemark}}</p>
      <div style="margin-top: 20px" class="select">
        <select v-model="invalidRemark">
          <option></option>
          <option v-for="(item , index) in selectList" style="font-size: 12px;color: #aaaaaa" >{{item}}</option>
        </select>
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="invalid">失效</el-button>
  </span>
    </el-dialog>
  </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
  dataList:[],
  pageNum:1,
  pageSize:7,
  total:0,
  memberName:null,
  dialogVisible:false,
  show:false,
  form:{
    userId:null,
    loginId:null,
    userName:null,
    loginPassword:null,
    mobail:null,
    email:null,
    sex:null,
    age:null,
    payPassword:null
  },
  selectList:["头像违规","涉嫌传播淫秽物品","涉嫌租借、盗取、转让或囤积账户等行为","涉嫌刷单、刷赞、刷粉等炒作数据造假","涉嫌恶意占用平台资源"],
  invalidRemark:null


};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  page(){
    this.$http({
      url: "member/page",
      method: "post",
      data:this.$http.adornData({
        pageNum:this.pageNum,
        pageSize:this.pageSize
      })
    }).then((res)=>{
      console.log(res.data.page.list)
      this.dataList = res.data.page.list
      this.total = res.data.page.totalCount
    })
  },
  handleSizeChange(val) {
    this.pageSize = val
    this.page()
  },
  handleCurrentChange(val) {
    this.pageNum = val
    this.page()

  },
  search(){
    this.$http({
      url:"member/search",
      method:"post",
      data:{
        userName:this.memberName
      }
    }).then((res)=>{
      if (res.data.code==0){
        this.dataList = res.data.list
      }

    })
  },
  invalid(){
    this.$http({
      url:"member/invalid",
      method:'post',
      data:{
        id: this.form.userId,
        remark:this.invalidRemark
      }
    }).then((res)=>{
      this.page()
      this.dialogVisible = false
    })
  },
  openInvalid(item){
    this.form.userId = item.userId
    this.form.userName = item.name
    this.dialogVisible = true
    // console.log(item)
  },

},
//声明周期 - 创建完成（可以访问当前this实例）
created() {
  this.page()
},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.table{
  line-height: 0;
}
.hearder{
  display: flex;
  width: 100%;
  height: 100px;
  /*background-color: #FBAB7E;*/
}

.search{
  display: flex;
  margin: 25px;
  width: 350px;
  height: 50px;
  /*background-color: red;*/
}
.search>input{
  width: 200px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 10px;
  color: #99A3A4;
  font-size: 17px;
  border: 1px solid #409eff;
  outline-color: #48dd68;
}
.add{
  display: flex;
  margin-top: 25px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 100px;
  border-radius: 5px;
  color: #ffffff;
  font-size: 16px;
  background-color: #48dd68;
}
.add>div{
  width: 35px;
  height: 50px;
  text-align: right;
  line-height: 50px;
}
#getAll:active{
  background-color: #3498DB;
}
#getAll:hover{
  background-color: #F7DC6F;
}
.dialog{
  line-height: 0;

}
.select{
  margin: 0 auto;
  width: 60%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: red;
}
.select>select{
  width: 100%;
  height: 50px;
  text-align: center;
}

</style>
